<template>
    <div class="home-video-detail">
        <div class="top-flex-box">
            <div class="left-flex-box">
                <div class="show-video-box">
                    <video
                        controls="controls"
                        autoplay="autoplay"
                        class="video"
                        :src="detail.videoUrl">
                    </video>
                </div>
            </div>
            <div class="right-flex-box">
                <el-form
                    :model="detail"
                    :rules="rules"
                    :hide-required-asterisk="true"
                    ref="detail"
                    label-width="140px"
                    class="input-no-border-box">
                    <el-form-item label="封面" prop="name">
                        <uploadOwnImg v-model="detail.videoCover" :needTransform="1"/>
                    </el-form-item>
                    <el-form-item label="标题" prop="desc">
                        <el-input type="textarea" v-model="detail.videoTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="关联游戏" prop="region">
                        <span>{{detail.aboutGame}}</span>
                    </el-form-item>
                    <el-form-item label="渠道" prop="type">
                        <el-select v-model="detail.official" placeholder="请选择渠道">
                            <el-option label="官方" :value="true"></el-option>
                            <el-option label="用户" :value="false"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发布者">
                        <span>{{detail.author || '/'}}</span>
                    </el-form-item>
                    <el-form-item label="作者">
                        <div v-if="detail.official">
                            <span v-if="detail.aboutGame">{{detail.aboutGame}}官方</span>
                            <span v-else>/</span>
                        </div>
                        <el-select v-model="detail.userId" placeholder="请选择作者" @change="selectChange" v-else>
                            <el-option :label="item.userName" :value="item.id" v-for="(item, index) in userList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发布时间">
                        <el-date-picker
                            class="time-picker"
                            value-format="yyyy-MM-dd"
                            v-model="detail.publishTime"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="采用状态" prop="resource">
                        <span>待审核</span>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="sumbmit-box">
            <el-button style="width:150px;" size="small" type="primary" @click="saveVideo">保存并选中</el-button>
            <el-button style="width:150px;" size="small" @click="goback">不选中</el-button>
        </div>
    </div>
</template>

<script>
// import uploadVideo from './uploadVideo'
export default {
    data () {
        return {
            detail: {
                videoid: '',
                userid: '',
                gameid: '',
                url: '',
                size: 0,
                duration: null,
                cover: '',
                title: '',
                showType: 0,
                delStatus: 0,
                isDraft: 0,
                type: 0,
                gameTopic: null,
                auditStatus: 1,
                auditReason: null,
                storageid: null,
                rewardCoinNum: 0,
                thumbsNum: 5,
                commentNum: 0,
                shareNum: 0,
                playNum: 0,
                showHome: 1,
                homeWeight: null,
                height: 0,
                width: 0,
                createTime: '',
                updateTime: '',
                sourceFrom: null,
                adminId: null,
                adminName: null,
                userName: '',
                rewardNum: null,
                complainNum: null,
                identify: ''
            },
            rules: {
                // name: [
                //     { required: true, message: '请输入活动名称', trigger: 'blur' },
                //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                // ],
                // region: [
                // ],
                // date1: [
                //     { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                // ],
                // date2: [
                //     { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                // ],
                // type: [
                //     { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                // ],
                // resource: [
                //     { required: true, message: '请选择活动资源', trigger: 'change' }
                // ],
                // desc: [
                //     { required: true, message: '请填写活动形式', trigger: 'blur' }
                // ]
            }
        }
    },
    props: ['data', 'userList'],
    created () {
        this.detail = this.data
    },
    methods: {
        // 保存并选中
        saveVideo () {
            this.$emit('save')
        },

        // 返回
        goback () {
            this.$emit('nosave')
        },

        selectChange (id) {
            this.userList.forEach(item => {
                if (item.id === id) {
                    this.detail.userName = item.userName
                }
            })
        }
    },
    components: {
        // uploadVideo
    }
}
</script>

<style lang="scss" scoped>
    .home-video-detail {
        .top-flex-box {
            display: flex;
            .left-flex-box {
                width: 400px;
                padding: 0 20px;
                .show-video-box {
                    height: 640px;
                    // background-color: #000000;
                    border: 1px dashed #cccccc;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .video {
                        width: 100%;
                        max-height: 100%;
                        outline: none;
                    }
                }
            }
            .right-flex-box {
                flex: 1;
                .time-picker {
                    /deep/ .el-input__inner {
                        padding-left: 35px!important;
                    }
                }
            }
        }

        .sumbmit-box {
            width: 500px;
            margin: 30px auto 0;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .go-game-detail {
            font-size: 12px;
            color: #409EFF;
            cursor: pointer;
        }
    }
</style>
